import React, {Component, createRef} from 'react';

class Todolist extends Component {
    state = {
        list: ["aaa", "bbb", "ccc"],
        htmlList:'<div style={{background:"red"}}>huawei</div>'
    }
    myEnter = createRef();

    render() {
        let item = this.state.list.map((item, index) => {
            return <li onClick={this.handleClick.bind(this, index)}>{item}</li>
        })
        return (<div>
            <input ref={this.myEnter}/>
            <button onClick={this.handleAdd.bind(this)}>add</button>
            <ul>
                {item}
            </ul>
            <span dangerouslySetInnerHTML={{
                __html:this.state.htmlList
            }}></span>
            {/*方案1*/}
            {this.state.list.length === 0 ? <div>暂无代办数据</div> : null}
            {/*方案二*/}
            {this.state.list.length === 0 && <div>暂无代办数据</div>}
        </div>);
    }

    handleClick(index) {
        //注意：不要直接修改状态
        let list = this.state.list;
        list.splice(index, 1);
        this.setState({
            list: list
        })
    }

    handleAdd() {
        let newList = [...this.state.list];
        newList.push(this.myEnter.current.value);
        this.myEnter.current.value = "";
        this.setState({
            list: newList
        })
    }
}

export default Todolist;
